﻿<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
    <script src="/_layouts/15/SP.js" type="text/javascript"></script>
    <script src="/_layouts/15/SP.UI.Dialog.js" type="text/javascript"></script>
    <script src="/_layouts/15/sp.search.js" type="text/javascript"></script>

  <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript" ></script>
  <script src="../Scripts/jquery-ui.custom.js" type="text/javascript"></script>
  <script src="../Scripts/jquery.cookie.js" type="text/javascript"></script>
  <script src="../Scripts/jquery.dynatree.js" type="text/javascript"></script>
  <script src="../Scripts/knockout-2.2.1.js" type="text/javascript"></script>

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/AdRotator-1.9.js"></script>
    <script src="../Scripts/Analytics-1.2.js"></script>
    <script type="text/javascript" src="../Scripts/App.js?v=2.8"></script>



        <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css?v=2.5" />
    <link href="../Content/ui.dynatree.css" rel="stylesheet" type="text/css"/>
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<div id="divMain" >
    <div id="divSearchRibbon" style="display: none;">
        
        <div id="CancelSearch" data-bind="click: $root.onCancelSearch" ><img src="../Images/Empty.png"/ ></div>
        <!-- ko if: onSearchSite -->
        <div class="SearchMainSite" data-bind="event: { mouseover: $root.onHoverMainSite, mouseout: $root.onOffHover }, click: $root.onSearchMainSite" ><img src="../Images/mainSite.png"/ ><p>Current Site</p></div>
        <div class="SearchAllSubsites" data-bind="event: { mouseover: $root.onHoverAllSubsites, mouseout: $root.onOffHover }, click: $root.onSearchAllSubsites" ><img src="../Images/allSubsite.gif"/ ><p>All Subsites</p></div>
        <!-- /ko -->
        <!-- ko ifnot: onSearchSite -->
        <div class="SearchMainSite" data-bind="event: { mouseover: $root.onHoverMainSite, mouseout: $root.onOffHover }, click: $root.onSearchMainSite" ><img src="../Images/folders.png"/ ><p>Current folder</p></div>
        <div class="SearchAllSubsites" data-bind="event: { mouseover: $root.onHoverAllSubsites, mouseout: $root.onOffHover }, click: $root.onSearchAllSubsites" ><img src="../Images/subfolders.png"/ ><p>All subfolders</p></div>
        <!-- /ko -->
    </div>
    <div id="divWorkflowRibbon"  style="display: none;">
        <img id="HomeTab" data-bind="click: $root.onChangeToHome" src="../Images/Home.png"/>
        <img data-bind="click: $root.publishFiles, attr: { src: $root.CurrentImgpublishFiles }, event: { mouseover: $root.enablepublishFilesImg, mouseout: $root.disablepublishFilesImg }" id="PublishFiles"  />
        <img data-bind="click: $root.approveFiles, attr: { src: $root.CurrentImgapproveFiles }, event: { mouseover: $root.enableapproveFilesImg, mouseout: $root.disableapproveFilesImg }" id="ApproveFiles"  />
        <img data-bind="click: $root.unpublishFiles, attr: { src: $root.CurrentImgunpublishFiles }, event: { mouseover: $root.enableunpublishFilesImg, mouseout: $root.disableunpublishFilesImg }" id="unPublishFiles"  />
        <img data-bind="click: $root.rejectFiles, attr: { src: $root.CurrentImgrejectFiles }, event: { mouseover: $root.enablerejectFilesImg, mouseout: $root.disablerejectFilesImg }" id="rejectFiles"  />
        <img data-bind="click: $root.unpublishFiles, attr: { src: $root.CurrentImgcancelapproveFiles }, event: { mouseover: $root.enablecancelapproveFilesImg, mouseout: $root.disablecancelapproveFilesImg }" id="cancelApproval"  />
    </div>
    <div id="divRecycleRibbon" style="display: none;" >
        <div id="EmptyRe" data-bind="click: $root.onEmptyReh" ><img src="../Images/Empty.png"/ ></div>
        <div id="resAll" data-bind="click: $root.onresAll" ><img src="../Images/Empty.png"/ ></div>
        <div id="ResSe" data-bind="click: $root.onResSe" ><img src="../Images/Empty.png"/ ></div>
    </div>

    <div id="divRibbon">
        <img id="WorkflowTab" data-bind="click: $root.onChangeToWorkflow" src="../Images/Workflow.png"/>
        <img data-bind="click: $root.CopyFileToDestination, attr: { src: $root.CurrentImgPaste }, event: { mouseover: $root.enablePasteImg, mouseout: $root.disablePasteImg }" id="paste"  />
        <img data-bind="click: $root.doCopy, attr: { src: $root.CurrentImgCopy }, event: { mouseover: $root.enableCopyImg, mouseout: $root.disableCopyImg }" id="copy"  />
        <img data-bind="click: $root.doCut, attr: { src: $root.CurrentImgCut }, event: { mouseover: $root.enableCutImg, mouseout: $root.disableCutImg }" id="cut" />
        <img data-bind="click: $root.onDelete, attr: { src: $root.CurrentImgDelete }, event: { mouseover: $root.enableDeleteImg, mouseout: $root.disableDeleteImg }" id="Delete" />
        <img data-bind="click: $root.onRename, attr: { src: $root.CurrentImgRename }, event: { mouseover: $root.enableRenameImg, mouseout: $root.disableRenameImg }" id="rename"  />
        <img data-bind="click: $root.onCreateNewFolder, attr: { src: $root.CurrentImgNewFolder }, event: { mouseover: $root.enableNewFolderImg, mouseout: $root.disableNewFolderImg }" id="NewFolder" />
        <img data-bind="click: $root.doinvertSelection, attr: { src: $root.CurrentImgInvertSelectionOnClick }, event: { mouseover: $root.enableInvertImg, mouseout: $root.disableInvertImg }" id="invertSelection"/>
        <img data-bind="click: $root.doselectNone, attr: { src: $root.CurrentImgSelectNone }, event: { mouseover: $root.enableSelectNoneImg, mouseout: $root.disableSelectNoneImg }" id="selectNone" />
        <img data-bind="click: $root.doselectAll, attr: { src: $root.CurrentImgSelectAll }, event: { mouseover: $root.enableSelectAllImg, mouseout: $root.disableSelectAllImg }" id="selectAll"/>
        <div id="ShowHideLibrary"><input type="checkbox" data-bind="checked:$root.ShowHiddenLibraries, event: { change: $root.CheckforHiddenLibraries }" /></div>
    </div>
    <div id="adRotator1">

    </div>
<!--    <div id="adCloser" data-bind="click: $root.closeAd"><a onmouseover="" style="cursor: pointer;color:white;"> Close X</a></div>
    <div id="adRotator2">

    </div>
-->

    <div id="divControlbar">
        <img data-bind="click: $root.backOneLvl, attr: { src: $root.CurrentBackArrow }, event: { mouseover: $root.enableArrowImg, mouseout: $root.disableArrowImg }" id="BackArrow"  />
       <div  id="Controlbar">
           <div class="soe-main-image"><img data-bind="attr: { src: $root.currentImgControl }" /></div>
           <div class="soe-main-list-image"><img src="../Images/ArrowBlack.png" /></div>
       <ul id="listControlbar" data-bind="foreach: currentPosition">
           <li data-bind="click: $root.onRedirect">
           
           <div class = "soe-main-list-title" data-bind="text: formattedName"></div>
           <div class="soe-main-list-image"><img src="../Images/ArrowBlack.png" /></div>
           </li>
       </ul>
   </div>

        <div id ="SearchBar">
            <input data-bind="value: SearchKeyValue" onclick="this.select();" />
            <img data-bind="click: $root.onSearch" src="../Images/searchBt.png" />
        </div>
    </div>
    <div id="divOrder">
        <img id="OrderUp" src="../Images/ArrowOrderUp.png" style="display: none;"/ >
        <img id="OrderDown" src="../Images/ArrowOrderDown.png" style="display: none;"/ >
        <div class="orderName" data-bind="click: $root.onChangeOrderByN" ><img src="../Images/Empty.png"/ ></div>
        <div class="orderDatemodified" data-bind="click: $root.onChangeOrderByD" ><img  src="../Images/Empty.png"/></div>
        <div class="orderType" data-bind="click: $root.onChangeOrderByT" ><img  src="../Images/Empty.png"/></div>
        <div class="orderPath" data-bind="click: $root.onChangeOrderByP" style="display: none;"><img  src="../Images/Empty.png"/></div>
        <div class="orderSize" data-bind="click: $root.onChangeOrderByS" ><img  src="../Images/Empty.png"/></div>
        <div class="orderVersion" data-bind="click: $root.onChangeOrderByV" ><img  src="../Images/Empty.png"/></div>
        <div class="orderApprovalStatus" data-bind="click: $root.onChangeOrderByA" ><img  src="../Images/Empty.png"/></div>
    </div>
<div id="Data" data-bind="event: { onkeydown: $root.OnKeyDown }">
       <ul id="libraryData" data-bind="template: { name: 'folderTmpl', foreach: folderCollection }">
       </ul>
    <ul id="Ul1" data-bind="template: { name: 'fileTmpl', foreach: fileCollection }">
       </ul>
        <ul id="Ul3" data-bind="template: { name: 'libraryColctionTmpl', foreach: CollectionLibraries }">
       </ul>
    <ul id="Ul2" data-bind="template: { name: 'subsiteCollectionTmpl', foreach: CollectionSubsites }">
       </ul>

</div>
    <div id="divideline">

    </div>

<div id="divData">

       <ul id="listData" data-bind="template: { name: 'itemTmpl', foreach: siteCollection }">
       </ul>
</div>




<script id="itemTmpl" type="text/html">
            <img class="current-selected" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg }, click: $root.Navigator, attr: { src: imgIntensity }"/>
       <div  class="soe-main-list"  data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg },click: $root.Navigator">         
       <div class="soe-main-list-image"><img data-bind=" attr: { src: imgSource }" /></div>
           <div class="soe-main-list-image-site"><img src="../Images/subsite.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="text: formattedName"></p></div>
               </div>
               
    
       

       <div data-bind=" attr: { id: String(site.get_id()) }" style="display: none;">

               <ul data-bind=" attr: { id: librarylvl2 }, template: { name: 'libraryTmpl', foreach: libraries }" ></ul>
               <ul data-bind=" attr: { id: subSitelvl2 }, template: { name: 'itemTmplLoop', foreach: subSites }" ></ul>
                           <ul>
                        <img class="current-selected" data-bind=" event: { mouseover: $root.enableImgRecy, mouseout: $root.disableImgRecy }, click: $root.LoadReCycleBin, attr: { src: recycleBinPresent().imgIntensity }" />
    <li>
        <div  class="soe-main-list" data-bind="event: { mouseover: $root.enableImgRecy, mouseout: $root.disableImgRecy }, click: $root.LoadReCycleBin">

       <div class="soe-main-list-image"><img src="../Images/NoArrow.png"/></div>
           <div class="soe-main-list-image"><img src="../Images/RecycleIcon.png" /></div>
       <div class="soe-main-list-title" ><p>Recycle Bin</p></div>
       </div>
            </li>
                    </ul>
    </div>
                
    
</script>

<script id="itemTmplLoop" type="text/html">
           <img class="current-selected" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg },click: $root.Navigator,attr: {src: imgIntensity }"/> 
    <li data-bind=" attr: { class: String(site.get_id()) }">
       
       <div  class="soe-main-list" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg },click: $root.Navigator">
 
       <div class="soe-main-list-image"><img data-bind=" attr: { src: imgSource }"/></div>
           <div class="soe-main-list-image-site"><img src="../Images/subsite.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="text: formattedName"></p></div> 
           </div>
       </div>
       <div data-bind=" attr: { id: String(site.get_id()) }" style="display: none;">

               <ul data-bind=" attr: { id: librarylvl2 }, template: { name: 'libraryTmpl', foreach: libraries }" ></ul>

               <ul data-bind=" attr: { id: subSitelvl2 }, template: { name: 'itemTmplLoop', foreach: subSites }" ></ul>
                           <ul>
                        <img class="current-selected" data-bind=" event: { mouseover: $root.enableImgRecy, mouseout: $root.disableImgRecy }, click: $root.LoadReCycleBin, attr: { src: recycleBinPresent().imgIntensity }" />
    <li>
        <div  class="soe-main-list" data-bind="event: { mouseover: $root.enableImgRecy, mouseout: $root.disableImgRecy }, click: $root.LoadReCycleBin">

       <div class="soe-main-list-image"><img src="../Images/NoArrow.png"/></div>
           <div class="soe-main-list-image"><img src="../Images/RecycleIcon.png" /></div>
       <div class="soe-main-list-title" ><p>Recycle Bin</p></div>
       </div>
            </li>
                    </ul>
    </div>
    


</script>


<script id="libraryTmpl" type="text/html">
    <!-- ko if: isHidden --><div class="isHiddenLirary" style="display: none;">
            <img class="current-selected" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg }, click: $root.ShowLibraryData, attr: { src: imgIntensity }" />
    <li data-bind=" attr: { class: String(libraryItem.get_id()) }">
       <div  class="soe-main-list-dropable" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg },click: $root.ShowLibraryData">

       <div class="soe-main-list-image"><img data-bind="attr: { id: String(libraryItem.get_id()), src: imgSource }"/></div>
           <div class="soe-main-list-image-library"><img src="../Images/itdl.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="    text: formattedName"></p></div>
       </div>
        <ul data-bind="template: { name: 'subfolderTmpl', foreach: subfolders }" ></ul>
            
    </li>
    </div>
    <!-- /ko -->
        <!-- ko ifnot: isHidden -->
            <img class="current-selected" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg }, click: $root.ShowLibraryData, attr: { src: imgIntensity }" />
    <li data-bind=" attr: { class: String(libraryItem.get_id()) }">
       <div  class="soe-main-list-dropable" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg }, click: $root.ShowLibraryData">

       <div class="soe-main-list-image"><img data-bind="attr: { id: String(libraryItem.get_id()), src: imgSource }"/></div>
           <div class="soe-main-list-image-library"><img src="../Images/itdl.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="    text: formattedName"></p></div>
       </div>
        <ul data-bind="template: { name: 'subfolderTmpl', foreach: subfolders }" ></ul>
            
    </li>
    <!-- /ko -->

</script>

<script id="subfolderTmpl" type="text/html">
    <img class="current-selected" data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg },click: $root.ShowFolderData,attr: {src: imgIntensity }" />
    <li>
       <div  class="soe-main-list-dropable"  data-bind="event: { mouseover: $root.enableImg, mouseout: $root.disableImg },click: $root.ShowFolderData">

       <div class="soe-main-list-image"><img data-bind="attr: {src: imgSource }" /></div>
           <div class="soe-main-list-image"><img src="../Images/folder.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="    text: formattedName"></p></div>
       </div>
        <ul data-bind="template: { name: 'subfolderTmpl', foreach: subfolders }" ></ul>
    </li>

</script>



<script id="folderTmpl" type="text/html">  
    <img class="current-selected-long" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"/>
    <li >

       <div  class="soe-main-list-dragable" >
       <input type="checkbox" class="check-box" data-bind="checked: selected, event: { mouseout: $root.CheckButtonsActivate }"/>
       <div class="soe-main-list-image" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }, style: { opacity: opacity }"><img   src="../Images/folder.png" /></div>
       <div class="soe-main-list-title" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: formattedName, attr: { title: folder.originalN }"></p></div>
       <div class="orderDatemodified" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: formattedDate, attr: { title: Datemodified }"></p></div>
       <div class="orderType" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p>Folder</p></div>
       <div class="orderPath" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }" style="display: none;"><p data-bind="    attr: {title: path }, text: formattedPath"></p></div>
       <div class="orderSize" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: size"></p></div>
       
       </div>
       </li>
</script>
    
<script id="fileTmpl" type="text/html">
        <img class="current-selected-long" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"/>
<li>     
       <div  class="soe-main-list-dragable" >
       <input type="checkbox" class="check-box" data-bind="checked: selected, event: { mouseout: $root.CheckButtonsActivate }"/> 

       <div class="soe-main-list-image" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }, style: { opacity: opacity }"><img data-bind="    attr: { src: iconUrl }" /></div>
       <div class="soe-main-list-title" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: formattedName, attr: { title: file.originalN }"></p></div>
       <div class="orderDatemodified" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: formattedDate, attr: { title: Datemodified }"></p></div>
       <div class="orderType" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: specificType"></p></div>
       <div class="orderPath" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, attr: { src: imgIntensityRight }" style="display: none;"><a data-bind="    attr: { href: path, title: normalPath }, text: formattedPath"></a></div>
       <div class="orderSize" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.onOpenFile }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: size"></p></div>
       <div class="orderVersion" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: Version"></p></div>
       <div class="orderApprovalStatus" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.showFolderDatabyClick }, click: $root.addCheckedFile, attr: { src: imgIntensityRight }"><p data-bind="    text: StatusApproval"></p></div>
       </div>
</li>
</script>

<script id="subsiteCollectionTmpl" type="text/html">
        <img class="current-selected-long" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.NavigatorDirect }, attr: { src: imgIntensityRight }"/>
<li>     
       <div  class="soe-main-list" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.NavigatorDirect }, attr: { src: imgIntensityRight }">
       <div class="soe-main-list-image-site"><img src="../Images/subsite.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="    text: formattedName"></p></div>
       </div>
</li>
</script>

<script id="libraryColctionTmpl" type="text/html">
     <!-- ko if: isHidden --><div class="isHiddenLirary" style="display: none;">
    <img class="current-selected-long" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.ShowLibraryData }, attr: { src: imgIntensityRight }"/>
<li>     
       <div  class="soe-main-list" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.ShowLibraryData }, attr: { src: imgIntensityRight } ">
       <div class="soe-main-list-image-library"><img src="../Images/itdl.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="    text: formattedName"></p></div>
       </div>
</li>
         </div>
    <!-- /ko -->
    <!-- ko ifnot: isHidden -->
    <img class="current-selected-long" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.ShowLibraryData }, attr: { src: imgIntensityRight }"/>
<li>     
       <div  class="soe-main-list" data-bind="event: { mouseover: $root.enableImgLong, mouseout: $root.disableImgLong, dblclick: $root.ShowLibraryData }, attr: { src: imgIntensityRight } ">
       <div class="soe-main-list-image-library"><img src="../Images/itdl.png" /></div>
       <div class="soe-main-list-title" ><p data-bind="    text: formattedName"></p></div>
       </div>
</li>
     <!-- /ko -->

</script>

<div id='GB_window' style="display: none;">
<div class='GB_caption'>Create New Folder</div>
<div>
    <p class="wordsPosition" face='Verdana' size='2'>Please enter new Folder's name</p>
    <input class="textPosition" type='text' data-bind="value: CurrentName" size='22' ID='Text1'>
    <button class="buttonPosition" data-bind="click: $root.createNewFolder" >OK</button>
    <button class="buttonCancelPosition" data-bind="click: $root.onCancel">Cancel</button>
</div>
</div>

<div id='GB_window_Rename' style="display: none;">
<div class='GB_caption'>Rename</div>
<div>
    <p class="wordsPosition" face='Verdana' size='2'>Please enter new name</p>
    <input class="textPosition" type='text' data-bind="value: CurrentName" size='22' ID='Text2'>
    <button class="buttonPosition" data-bind="click: $root.onOktoRename" >OK</button>
    <button class="buttonCancelPosition" data-bind="click: $root.onCancel">Cancel</button>
</div>

</div>

<div id='GB_window_Delete' style="display: none;">
<div class='GB_caption'>Delete</div>
<div>
    <p class="wordsPosition" face='Verdana' size='2'>Do you want to delete the selected file(s) or folder(s)?</p>
    <button class="buttonPosition" data-bind="click: $root.doDelete" >OK</button>
    <button class="buttonCancelPosition" data-bind="click: $root.onCancel">Cancel</button>
</div>

</div>
</asp:Content>
